<h1>Group list
  <div class="float-right">
    <button *permissionLink="'base.user-management.group.*'"
            routerLink="/management/groups/add/" type="button" class="btn btn-primary">
      <i class="fas fa-plus-circle"></i> Add new group
    </button>
  </div>
  <div class="clearfix"></div>
</h1>
<hr />
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-hover">
  <thead>
  <tr>
    <th scope="col">Public ID</th>
    <th scope="col">Name</th>
    <th scope="col">Label</th>
    <th scope="col" *permissionLink="'base.user-management.group.*'">Action</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let group of groupList">
    <th scope="row">{{group.public_id}}</th>
    <td>{{group.name}}</td>
    <td>{{group.label}}</td>
    <td *permissionLink="'base.user-management.group.*'">
      <a class="text-dark" [routerLink]="['/management/groups/edit/', group.public_id]">
        <fa-icon [icon]="['far', 'edit']"></fa-icon>
      </a>
      <a class="text-dark ml-2" [routerLink]="['/management/groups/delete/', group.public_id]" *ngIf="group.deletable">
        <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
      </a>
  </tr>
  </tbody>
</table>
